<template>
  <div class="login">
    <h2 class="title">管理员登录</h2>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form">
      <el-form-item prop="username">
        <el-col>
          <el-input
              placeholder="请输入用户名"
              prefix-icon="el-icon-info"
              v-model="ruleForm.username"
              @keypress.enter.native="submitForm"
          >
          </el-input>
        </el-col>
      </el-form-item>
      
      <el-form-item prop="password">
        <el-col>
          <el-input
              type="password"
              placeholder="请输入密码"
              prefix-icon="el-icon-setting"
              v-model="ruleForm.password"
              @keypress.enter.native="submitForm"
          >
          </el-input>
        </el-col>
      </el-form-item>
      
      <!-- <el-form-item prop="code">
        <el-col :span="16">
          <el-input
              class="code-input"
              placeholder="请输入验证码"
              prefix-icon="el-icon-search"
              v-model="ruleForm.code">
          </el-input>
        </el-col>
        <el-col :span="8">
          <img src="" alt="" class="code-img">
        </el-col>
      </el-form-item> -->
      
      <el-form-item>
        <el-col>
          <el-button type="primary" class="login-btn" @click="submitForm('ruleForm')">登录</el-button>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import _ from 'lodash'
  
  export default {
    name: 'Login',
    data() {
      return {
        ruleForm: {
          username: '',
          password: '',
          code: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
          // code: [
          //   { required: true, message: '请输入验证码', trigger: 'blur' }
          // ]
        }
      }
    },
    methods: {
      submitForm: _.throttle(function() {
        this.$refs.ruleForm.validate(async (valid) => {
          if (!valid) {
            return false
          }
          let { data: { code, data } } = await this.$axios({
            url: this.$api + '/v1/login/sign',
            method: 'POST',
            data: {
              username: this.ruleForm.username,
              password: this.ruleForm.password
            }
          })
          if(code == 0) {
            localStorage.setItem('token', data.token)
            localStorage.setItem('user_id', data.id)
            localStorage.setItem('user_state', data.state) //state: 1 超级管理员 2 品牌方 3 设计师 
            this.$message.success('登陆成功！')
            setTimeout(() => {
              //this.$router.push('/goodsList')
              this.$router.push('/')
            }, 2000)
          }
        })
      },3000, {
        trailing: false
      })
    }
  }
</script>

<style lang="scss" scoped>
  .login {
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    padding-bottom:30px;
    width: 500px;
    box-shadow: 0 1px 5px 2px #eee;
    border-radius: 5px;
    .form {
      margin: 0 auto;
      width:280px;
    }
    .title {
      text-align: center;
    }
    .el-row {
      margin-top: 20px;
    }
    .code-img {
      width:100%;
      height:100%;
    }
    .login-btn {
      display: block;
      width: 100%;
    }
  }
</style>
<style lang="scss">
  .code-input{
    .el-input__inner {
      border-radius: 4px 0 0 4px;
    } 
  }
</style>
